<template>
  <div class="user-wrap">
      <el-button
        class="create-btn"
        type="success"
        size="small"
      @click="handleAddTeam">加入团队 +</el-button>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            label="团队名称"
            prop="team_name">
        </el-table-column>
        <el-table-column
            label="是否通过"
            prop="is_active">
        </el-table-column>
        <el-table-column
            label="加入时间"
            :formatter="formatterTime"
            prop="modified_on">
        </el-table-column>
        <el-table-column
            align="right">
            <template #header>
                <el-input
                v-model="search"
                @blur="searchFollowTeam"
                size="mini"
                placeholder="输入用户名搜索"/>
            </template>
            <template #default="scope">
                <el-button
                size="mini"
                type="danger"
                @click="handleLeaveTeam(scope.$index, scope.row)">退出团队</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
      class="page-wrap"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
    <el-dialog title="加入团队" v-model="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="团队id" :label-width="formLabelWidth">
                <el-input v-model.number="form.team_id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="请求加入描述" :label-width="formLabelWidth">
                <el-input v-model="form.user_msg" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAddTeam">确 定</el-button>
            </span>
        </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import api from '../../../api/index'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  setup () {
    const formLabelWidth = ref('120px')

    // 获取用户列表
    const tableData = ref([])
    async function getList (params) {
      const res = await api.getFollowTeamList(params)
      if (res.data.code === 200) {
        tableData.value = res.data.data.list
        totalCount.value = res.data.data.pager.total_rows
        search.value = ''
      } else {
        ElMessage.error('获取团队列表失败：' + res.data.msg)
      }
    }
    getList()

    const form = ref({
      team_id: '',
      user_msg: ''
    })

    const dialogFormVisible = ref(false)

    // 提交用户信息
    async function confirmAddTeam () {
      // 验证信息是否齐全
      if (!(form.value.team_id)) {
        ElMessage.error('表单信息不全')
        return
      }
      addTeam(form.value)
    }

    // 添加用户
    async function handleAddTeam () {
      form.value = {
        team_id: '',
        user_msg: ''
      }
      dialogFormVisible.value = true
    }
    // 加入一个团队
    async function addTeam (params) {
      const res = await api.addTeam(params)
      if (res.data.code === 200) {
        getList()
        ElMessage.success({
          message: '添加成功',
          type: 'success'
        })
        dialogFormVisible.value = false
      } else {
        ElMessage.error('添加失败：' + res.data.msg)
      }
    }

    // 离开团队
    function handleLeaveTeam(index, row) {
      ElMessageBox.confirm('此操作将离开该团队, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await LeavelTeam(row.id)
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消'
        })
      })
    }
    async function LeavelTeam(id) {
      const res = await api.leavelTeam({ team_id: id })
      if (res.data.code === 200) {
        ElMessage.success({
          message: '离开成功',
          type: 'success'
        })
        getList()
      } else {
        ElMessage.error('离开失败：' + res.data.msg)
      }
    }

    
    // 搜索用户
    const search = ref('')
    async function searchFollowTeam () {
      currentPage.value = 1
      pageSize.value = 10
      if (search.value === '') {
        getList({ page: currentPage.value, page_size: pageSize.value })
        return
      }
      currentPage.val = 1
      const res = await api.findTeamByTeamname({ team_name: search.value })
      if (res.data.code === 200) {
        tableData.value = res.data.data.list
        ElMessage.success({
          message: '搜索成功',
          type: 'success'
        })
      } else {
        ElMessage.error('修改失败：' + res.data.msg)
      }
    }

    // 分页相关
    const totalCount = ref(0)
    const currentPage = ref(1)
    const pageSize = ref(10)
    function handleSizeChange (val) {
      pageSize.value = val
      getList({ page: currentPage.value, page_size: val })
    }
    function handleCurrentChange (val) {
      currentPage.value = val
      getList({ page: val, page_size: pageSize.value })
    }
    // 超过一页就隐藏分页插件
    const hideOnSinglePage = computed(() => {
      return totalCount.value <= 10
    })

    // 格式化时间
    function formatterTime(row, column, cellValue) {
      return new Date(cellValue).toLocaleString()
    }

    return {
      tableData,
      search,
      dialogFormVisible,
      form,
      formLabelWidth,
      addTeam,
      handleLeaveTeam,
      confirmAddTeam,
      handleAddTeam,
      searchFollowTeam,
      currentPage,
      totalCount,
      handleSizeChange,
      handleCurrentChange,
      pageSize,
      hideOnSinglePage,
      formatterTime
    }
  }
}
</script>

<style lang="scss" scoped>
    .user-wrap{
        width: 100%;
        min-width: 500px;
        .create-btn{
            margin-bottom: 10px;
            display: flex;
            justify-content: flex-end;
        }
        .page-wrap{
            margin-top: 10px;
        }
    }
</style>
